import React, { Component, PureComponent } from "react";

/* 
  高性能组件
  1.PureComponent  应用在类组件上面
  2.memo 应用在函数式组件上面
  
*/
//    类组件 pureComponent
/* class Dome extends PureComponent{
  state={

  }
componentDidUpdate(){
  console.log("demo组件更新好了")
}
  render(){
    return <h1>Demo组件{this.props.msg}</h1>
  }
} */
//    函数式组件   memo
const DomeComponent = React.memo(function Dome(props) {
  console.log("组件渲染了");
  return <h1>demo{props.msg}</h1>;
});
class App extends Component {
  state = {
    msg: "🐂",
  };
  handleClick = (params) => {
    this.setState({
      msg: "🐂",
    });
  };
  render() {
    return (
      <div>
        {/* <Dome msg={this.state.msg}></Dome> */}
        <DomeComponent msg={this.state.msg}></DomeComponent>
        <button onClick={this.handleClick}>点击变🐖</button>
      </div>
    );
  }
}

export default App;
